<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; height:90% ">
            <view class="popup-content">
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80" show-scrollbar="false"> -->

                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <view class="commentPopup-wrapper ">
                        <view class="comment-item">
                            <view>
                                <view class="user-info">
                                    <view class="user-info-left" style="display: flex; align-items: center;">
                                        <img :src="comments.wxUserInfo.avatarUrl ? comments.wxUserInfo.avatarUrl : defaultAvatarUrl"
                                            alt="">
                                        <view class="user-name">{{ comments.wxUserInfo.nickName }}</view>
                                    </view>
                                    <template v-if="pageSymbol !== 'myActCommentDetails'">
                                        <van-button size="mini" class="guanzhu" type="default">{{
                                            comments.currentUserFollow == true ? '已关注' : '关注' }}</van-button>
                                    </template>
                                </view>
                                <view class="comment-content">{{ comments.content }}</view>
                            </view>
                            <template v-if="  level == 1">
                                <view class="image-container" v-if="comments.attachment && comments.judgeImages.length > 0">
                                    <view class="imgInfo" v-for="(i, j) in comments.judgeImages.slice(0, 3)" :key="j">
                                        <img :src="i" />
                                    </view>
                                </view>
                            </template>
                            <view class="comment-footer">
                                <view class="time">{{ comments.publishTime }}</view>
                                <view class="interaction" v-if="pageSymbol == 'myActCommentDetails'">
                                    <van-icon name="chat-o" style="margin-right: 8rpx;" size="12" />
                                    <view class="count" style="margin-right:40rpx;">{{ comments.commentCount }}
                                    </view>
                                    <view @click.stop="handlerLike(item)" style="padding-right: 8rpx;">
                                        <van-icon name="good-job-o" size="15" style="color:#888888 !important;"
                                            v-if="!item.currentUserLike" />
                                        <van-icon name="good-job" size="15" style="color:#FF6203 !important;"
                                            v-if="item.currentUserLike" />
                                    </view>
                                    <view class="count">{{ item.likeCount }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="reply_tips" v-if="comments.commentCount == 0 || !comments.commentCount">  抢先回复 </view>
                        <view class="input-section">
                            <view class="my-reply-input">
                                <input :placeholder="`回复 ${comments.wxUserInfo.nickName || '用户'}：`" :value="myReplyContent" @input="inputMyReply" confirm-type="send" 	adjust-position="true" type="text" maxlength="200"	 @confirm="handleSendReply" />
                            </view>
                            <button class="send-btn" @tap="handleSend"  :disabled="isSubmitting"
                            :class="{ 'disabled-btn': isSubmitting }">发布</button>
                        </view>
                    </view>

                    <van-toast id="van-toast" />
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import {addCommentApi} from '@/api/activity'


export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        comments:{
            type:Object,
            default:()=>{}
        },
        pageSymbol:{
            type:String,
            default:''
        },
        defaultAvatarUrl: {
            type: String,
            default: ''
        },
        activityId:{
            type:String,
            default:''
        },
        postId:{ //一级评论用这个
            type:String,
            default:''
        },
        level:{
            type:Number,
            default:0
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            title: '暂无回复',
            popupHeight: '80%',
            myReplyContent:undefined,
            isSending: false,
            parentId:undefined, // 父评论的 ID
        }
    },

    computed: {
    },


    watch: {
        show: {
            immediate: true, // 这句重要
            handler(v) {
                console.log(v, 'v',this.comments,'this.comments')
                if (v) {
                    const commentCount = this.comments?.commentCount || 0;
                    this.title = commentCount > 0? `${commentCount}条回复` : '暂无回复';
                }
            },
            deep: true
        },
        comments: {
            immediate: true, // 这句重要
            handler(v) {
                console.log(v, 'v',this.comments,'this.comments')
                if (v) {
                  this.parentId = this.comments?.id
                }
            },
        },
        level: {
            immediate: true, // 这句重要
            handler(v) {
                console.log(v, 'v',this.level)
                if (v) {
                //   this.parentId = this.comments?.id
                }
            },
        },
        // show (newVal) {
        //     if (newVal) {
        //         console.log(newVal,this.comments,'this.comments')
        //         const commentCount = this.comments?.commentCount || 0;
        //         this.title = commentCount > 0 ? `${commentCount}条回复` : '暂无回复';
        //     }
        // }
    },
    onLoad () {

    },
    onReady () {
    },

    methods: {       
        // 关闭弹窗
        closePopup () {
            this.isCancel=false
            this.$emit('closePopup',this.isCancel)
        },
        // 我的回复 
        inputMyReply(e){
            console.log(e.detail.value,'e.detail.value')
            this.myReplyContent=e.detail.value
        },
        // 键盘右下角的发送--发送回复  
        async handleSendReply() {
            if (!this.myReplyContent?.trim()) {
                Toast('回复内容不能为空');
                return;
            }

            try {
                const res = await addCommentApi({
                    content: this.myReplyContent,
                    parentId: this.level !==1 ? this.parentId : undefined, // parentId 是父评论的 ID   不是一级评论时  用parentId
                    postId: this.level === 1 ?this.postId : undefined,
                    activityId: this.activityId  //
                });

                if (res.code === 200) {
                    this.$emit('reply-success'); // 触发成功事件
                    this.myReplyContent = ''; // 清空输入框
                    Toast.success('回复成功');
                    this.closePopup();
                }
            } catch (error) {
                console.error('回复失败:', error);
                Toast.fail('回复失败');
            }
        },
        // 发送回复 页面上的发送按钮
        async handleSend(){
            if (this.isSending) {
                Toast('正在发送中...');
                return;
            }
            if (!this.myReplyContent?.trim()) {
                Toast('回复内容不能为空');
                return;
            }
            try {
                this.isSending = true; // 开始发送时锁定
                const res = await addCommentApi({
                    content: this.myReplyContent,
                    parentId: this.level !==1 ? this.parentId : undefined, // parentId 是父评论的 ID   不是一级评论时  用parentId
                    postId: this.level === 1 ?this.postId : undefined,
                    activityId: this.activityId  //
                });

                if (res.code === 200) {
                    this.$emit('reply-success'); // 触发成功事件
                    this.myReplyContent = ''; // 清空输入框
                    Toast.success('回复成功');
                    this.closePopup();
                }
            } catch (error) {
                console.error('回复失败:', error);
                Toast.fail('回复失败');
            } finally {
                this.isSending = false; // 无论成功失败都解锁
            }
        }

  },

}
</script>
<style lang="scss" scoped>


::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding: 24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;


    .popup-main {
        height: 100%;
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .commentPopup-wrapper {
        padding-top: 23px;
    }

    // 综合评论 公用
    .comment-item {
        background-color: white;
        border-radius: 8rpx;
        overflow: hidden;
        border-bottom: 1rpx solid #efefef;
    }

    .reply-item {
        display: flex;
        margin-bottom: 64rpx;
    }

    .userInfo_avatar {
        img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 24rpx;
        }
    }

    .user-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user-info-left {
            display: flex;
            align-items: center;

            img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 24rpx;
            }
        }
    }

    .user-name {
        margin-left: 10rpx;
        font-size:28rpx;
        text-align: left;
        color: #333;
    }

    .comment-content {
        margin: 24rpx 0;
        font-weight: 400;
        font-size: 32rpx;
        line-height: 48rpx;
        text-align: left;
        color: #333;
    }

    .image-container {
        display: flex;
        flex-wrap: wrap;
        // height: 330rpx;
        width: 100%;

        // gap: 5rpx; /* 新增间距 */
        .imgInfo {
            width: calc((100% - 10rpx)/3);
            /* 调整宽度适配间隙 */
            overflow: hidden;
            /* 防止图片溢出 */
            margin-bottom: 10rpx;
        }

        img {
            height: 220rpx;
            width: 100%;
        }

        .imgInfo:nth-child(2n) {
            margin-bottom: 0rpx;
            /* 调整下间距 */
        }
    }

    .comment-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 10rpx 40rpx 10rpx;
        font-size: 24rpx;
        color: #999;
    }

    .comment-footer .time {
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #999;
    }

    .reply_tips{
        padding-top: 24rpx;
        font-weight: 400;
        font-size: 24rpx;
        text-align: center;
        color: #999;
    }
    .input-section {
        display: flex;
        align-items: flex-end; /* 使子元素在交叉轴上底部对齐 */
        margin-top: 60rpx;
    }
    .my-reply-input{
        min-height: 144rpx;
        border-radius: 8rpx;
        background: #f4f4f4;
        padding: 24rpx;
        width: 78%;
    }
    .send-btn {
        margin-left: 16rpx;
        padding: 0 16rpx;
        height: 40rpx;
        line-height: 40rpx;
        background-color: #ff6203;
        color: white;
        border: none;
        border-radius: 50rpx;
        font-size: 20rpx;
    }
}

// ::v-deep .van-cell {
//     border: 1px solid #888888 !important;
// }

// ::v-deep .van-cell--hover .hover-class{
//     border: 1px solid #888888;
// }
// .uni-input {
//     height: 33px;
//     line-height: 33px;
//     // border-bottom: 1px solid #f9f9f9; 
//     border: 1px solid #888888 !important;
// }
// :v-deep .van-field__control .input-class{
//     height: 33px !important;
//     line-height: 33px !important;
// }
// ::v-deep .van-field__control{
//     height: 33px !important;
//     line-height: 33px !important;
// }
// ::v-deep .van-field__body,.van-field__body--text{
//     height: 33px !important;
//     line-height: 33px !important;
// }

// ::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
//     font-weight: normal !important;
// }

.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

